<template>
  <!-- 关注用户组件 -->
  <van-button v-if="!isFollowed" class="follow-btn" type="info" color="#3296fa" round size="small" icon="plus"
    @click="onfollowed" :loading="isfollowLoading">关注</van-button>
  <van-button v-else class="follow-btn" round size="small" @click="onfollowed" :loading="isfollowLoading">
    已关注</van-button>
</template>

<script>
import { deleteUserFollow, addUserFollow } from '@/api/user.js'
export default {
  data () {
    return {
      // 关注加载
      isfollowLoading: false
    }
  },
  props: {
    isFollowed: {
      type: Boolean,
      require: true
    },
    autId: {
      type: [String, Number],
      require: true
    }
  },
  // 自定义v-model解析 规则
  model: {
    // 属性
    prop: 'isFollowed',
    // 事件
    event: 'updataIsFollow'
  },
  methods: {
    // 关注，取关
    async onfollowed () {
      this.isfollowLoading = true
      if (this.isFollowed) {
        // 已关注取关
        try {
          await deleteUserFollow(this.autId)
          this.$toast('取关成功')
        } catch (err) {
          this.$toast('取关失败')
        }
      } else {
        // 未关注关注
        try {
          await addUserFollow(this.autId)
          this.$toast('关注成功')
        } catch (err) {
          if (err.response && err.response.status === 400) {
            return this.$toast('不能关注自己')
          }
          this.$toast('关注失败')
        }
      }
      this.isfollowLoading = false
      this.$emit('updataIsFollow', !this.isFollowed)
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
